<!--  -->
<template>
<div class='innexForm'>
  <div class="block custom-timerShaftDialog-style">
    <div style="height: 140px;border: 1px solid #ccc;border-radius: 4px; margin-bottom: 14px;margin-left: 28px;padding: 0 20px 3px 20px;clear: fixed">
      <div class="custom-content-left">
        <p>{{formData.eventSource}}--{{formData.reporterName}}</p>
        <p>{{formData.reportDate | formatDate}}</p>
        <p>{{formData.description}}</p>
      </div>
      <template v-if="formData.photoArr&&formData.photoArr.length>0">
        <div class="custom-img-right">
        <div v-for='(item,index) in formData.photoArr' class="timeTop-right" :key="index">
          <img  :src="baseUrl+'/image/'+item" alt="" />
        </div>
        </div>
      </template>
    </div>
    <div class="custom-timerStatusContainer-style">{{status}}</div>
    <el-timeline pending>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :timestamp="activity.startTime | formatDate"
        placement="top">
        <el-card class="cardWapper">
          <div class="cardLeft">
            <p>任务名称：{{activity.taskName}}</p>
            <p>处理人：{{activity.assigneeName}}</p>
            <p v-for="(com,index) in activity.comments" :key="index">处理记录：{{com}}</p>
            <div v-if="index === activities.length - 1">
              <p v-if="activity.endTime === 0">状态：<span style="color:red;font-size:16px;">办理中...</span></p>
              <p v-else>状态：<span style="color:red;font-size:16px;">已完结</span></p>
            </div>
          </div>
          <div class="cardRight">
            <template v-if="activity.photoArr&&activity.photoArr.length>0">
              <div v-for='(item,index) in activity.photoArr' class="timeTop-right imgWapper" :key="index">
                <img  :src="baseUrl+'/image/'+item" alt="" />
              </div>
            </template>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import config from '@/config/index'
import {findEventDetail, getTaskTimer} from '@/http/EventApi'
export default {
// import引入的组件需要注入到对象中才能使用
  name: 'MajorCasesForm',
  props: {
    detailForm: {
      type: Object,
      default: function () {
        return {
        }
      }
    }
  },
  components: {},
  data () {
    // 这里存放数据
    return {
      formData: {},
      activities: [],
      status: '',
      baseUrl: config.serverUrl()
    }
  },
  // 方法集合
  methods: {
    // 查看时间轴
    checkTimerShaftHandle (data) {
      if (data) {
        this.uri = config.serverUrl
        let timerData = data
        let isWorkflowTimer = true
        if (!timerData.procsInsId) isWorkflowTimer = false
        timerData.isWorkflowTimer = isWorkflowTimer
        this.timeLineStatus = timerData.status
        var m = this
        findEventDetail(timerData.id).then(resp => {
          if (resp.code && resp.code === '200') {
            m.formData = resp.data
            m.$set(m.formData, 'photoArr', m.toArray(m.formData.photo))
          }
        })
        getTaskTimer(timerData).then(resp => {
          if (resp.code && resp.code === '200') {
            this.isTimerShaftDialogShow = true
            if (resp.data.historicTaskVo && resp.data.historicTaskVo instanceof Array) {
              var data = resp.data.historicTaskVo
              for (let i = 0; i < data.length; i++) {
                const element = data[i]
                m.$set(m.activities, 'photoArr', m.toArray(m.activities.photo))
                element.photoArr = m.toArray(element.photo)
              }
              m.activities = data
              for (let i = 0; i < data.length; i++) {
                if (data[i].endTime === 0) m.status = '处理中'
                else m.status = '已完结'
              }
            }
          } else {
            this.$message({
              type: 'info',
              message: '操作失败，请联系管理员'
            })
            return ''
          }
        })
      } else {
        return ''
      }
    },
    toArray (string) {
      let arr = []
      if (string) {
        let stringArr = string.split(',')
        for (let i = 0; i < stringArr.length; i++) {
          let obj = {}
          obj.name = 'IMG_' + i
          obj.url = stringArr[i]
          arr.push(obj)
        }
        return string.split(',')
      } else {
        return []
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    detailForm: {
      handler: function (data) {
        this.formData = JSON.parse(JSON.stringify(data))
        this.checkTimerShaftHandle(data)
        this.windowShow = true
      },
      deep: true,
      immediate: true
    }
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours()
      h = h < 10 ? ('0' + h) : h
      let m = date.getMinutes()
      m = m < 10 ? ('0' + m) : m
      let s = date.getSeconds()
      s = s < 10 ? ('0' + s) : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.custom-dialog-style-imgDialog .el-dialog{
  width: 82%;
}
.anonymityCheckbox{
  position: absolute;
  top: 3px;
  left: 220px;
}
#customCascaderStyle .el-cascader-menu{
  height: unset;
}
.custom-mar-bottom{
  margin-bottom: 74px !important;
}
.custom-mar-bottom .el-form-item__error{
  top: 80px;
  width: 200px;
}
.custom-timerShaftDialog-style {
  height: auto!important;
}
.custom-dialog_style_twoLine >>> .el-dialog__body {
  padding: 30px 18px;
}
.custom-content-left,
.custom-img-right{
  height: 120px;
  margin-top:10px;
  overflow: hidden;
}
.custom-content-left{
  width: 73%;
  float: left;
  line-height: 200%;
  overflow: hidden;
}
.custom-content-left p:nth-child(3){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.custom-img-right{
  width: 26%;
  float: right;
  border: 1px solid #c28d3c
}
.timeTop-right {
  text-align: center;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 100%
}
.cardRight {
  height: auto;
  overflow: hidden;
}
.timeTop-right img {
  width: 100%;
}
.imgWapper {
  width: 189px;
  float: left;
  height: 121px;
  overflow: hidden;
  border: 1px solid #c28d3c;
  margin: 5px 5px;
  border-radius: 3px
}

</style>
